import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, IStates, View} from "../../../script/frame/apiModel/gui/React";
import {ChatBarInterface, ChatInfo} from "../../interface/GuiInterface";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {Logger} from "../../../script/frame/apiModel/config/Logger";
import Tween from "../../tween/Tween";
import Easing from "../../tween/Easing";
import {FrameEvent} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";


export interface IProp {
    getChats: () => ChatInfo;
}
export interface IState {
    endIndex: number;
    chats: string[];
    delIndex: number;
}

export default class ChatBar extends ChatBarInterface<IProp, IState> {

    // chatMaxIndex = 0;

    // tween: Tween<{ radix: number }>;

    constructor(props: IProps & IProp) {
        super(props);

        this.state = {
            visible: true,
            endIndex: 0,
            delIndex: 0,
            chats: []
        }
    }

    render = () => {
        // let hidden = true;

        const maxChatBarItemNum = Configer.getUIConfig(UIConfigKey.maxChatItemNum);
        const fontSize = Configer.getUIConfig(UIConfigKey.fontSize);

        let arr: string[] = [];

        const disableBlp = Configer.getResource(ResourceKey.disableBlp);

        let endIndex = this.state.endIndex - this.state.delIndex;
        const startIndex = endIndex - maxChatBarItemNum;

        for (let i = startIndex; i < endIndex; i++) {
            const chat = this.state.chats[i];
            if (chat) {
                arr.push(chat);
            } else {
                arr.push('');
            }
        }

        const itemSize = { w: 0.25, h: 0.02 }
        const itemMargin = { l: 0, t: 0.001 };
        // const backSize = { w: itemSize.w, h: (itemSize.h + itemMargin.t) * maxChatBarItemNum };
        const backPos = { l: 0, t: 0.6 };

        return <View   key={GuiKeys.chatBar} style={{ top: backPos.t, left: backPos.l }}>
            {
                arr.map(
                    (ele, index, array) => {
                        if (!CodeUtil.isNullOrZero(ele)) {
                            const retLineArr = CodeUtil.autoLineBreak(ele, itemSize.w, fontSize);
                            const retLineNum = retLineArr.length;
                            const newItemSize = { h: retLineNum * itemSize.h, w: itemSize.w }
                            return <View  onMouseWheel={this.onWheel}  key={`${GuiKeys.chatBarItem}|${index}`} style={{ backgroundImage: disableBlp, width: newItemSize.w, height: newItemSize.h, marginL: itemMargin.l, marginT: itemMargin.t }}>{ele}</View>
                        }
                        return <View   key={`${GuiKeys.chatBarItem}|${index}`} style={{ hidden: true }}></View>
                    }
                )
            }
        </View>
    }


    onWheel = (event: FrameEvent) => {
        const del = event.del;
        let newDel = this.state.delIndex;
        const maxChatBarItemNum = Configer.getUIConfig(UIConfigKey.maxChatItemNum);
        const endIndex = this.state.endIndex - newDel;
        if (del > 0) {
            const startIndex = endIndex - maxChatBarItemNum;
            if (startIndex > 0) {
                newDel = newDel + 1;
            }
        } else {
            if (0 < newDel) {
                newDel = newDel - 1;
            }
        }
        if (newDel !== this.state.delIndex) {
            this.setState({
                ...this.state,
                delIndex: newDel,
            })
        }
    }

    openBar = () => {
        const chatInfo = this.props.getChats();
        const chats: string[] = JSON.parse(JSON.stringify(chatInfo.chats));
        const chatIndex = chatInfo.chatsIndex;
        // const lastIndex = chats.length;


        let newEndIndex = this.state.endIndex;
        if (newEndIndex === chatIndex) {
        } else {
            newEndIndex = chatIndex;
            this.setState({
                ...this.state,
                chats: chats,
                endIndex: newEndIndex,
            })
        }

        // if (chatIndex !== this.chatMaxIndex) {
        //     this.chatMaxIndex = chatIndex;
        //
        //     print(JSON.stringify(chatInfo))
        //
        //
        // }
    }

    getVisible = () => {
        return this.state.visible
    }
}